<template>
	 <div class="login container">
		 <Header>
			 <span>找回密码</span>
		 </Header>
		 
		<section>
			<div class="login-tel">
				<input type="text" placeholder="请输入新密码" v-model="userPwd" />
			</div>
			<div class='login-btn' @click="submitBtn">确认修改</div>
		</section>
		 <Tabbar></Tabbar>
	 </div>
</template>

<script>
import Header from "@/views/login/Header.vue"
import Tabbar from "@/components/common/Tabbar.vue";
import { Toast } from 'mint-ui';

//引入封装的依赖
import http from "@/common/api/request.js";

export default{
	name:"Login",
	components:{
		Header,
		Tabbar
	},
	data(){
		return{
			userPwd:null,
			//验证规则
			rulers:{
				//手机号码验证
				userPwd:{
					rule:/^\w{6,12}$/,
					msg:'密码不能为空，并且是6-12位'
				}
			},
		}
	},
	methods:{
		//验证，修改
		submitBtn(){
			//前端验证号码格式
			// if(!this.validate('userPwd')) return;
			console.log(`userTel:${this.$route.query.userTel},userPwd:${this.userPwd}`)
			//请求短信验证码接口
			http.$axios({
				url:'/api/recovery',
				method:'POST',
				data:{
					userTel:this.$route.query.userTel,
					userPwd:this.userPwd
				}
			}).then(res=>{
				Toast("修改成功")
				console.log(res.success)
				//修改成功，跳转登陆页
				if(res.success){
					this.$router.push({
						path:'/userLogin'
					})
				}
			})
		},
		//验证信息提示
		validate(key){
			let bool = true;
			if( !this.rules[key].rule.test(this[key]) ){
				//提示信息
				Toast(this.rules[key].msg);
				bool= false;
				return false;
			}
			return bool;
		},
	}
}
</script>

<style scoped lang="less">
	.login {
	  background-color: #f5f5f5;
	
	  section {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    // width: 100%;
		
		div{
			margin: 0.3rem 0;
			width: 8.5rem;
			height: 1.1rem;
		}
		
		input{
			line-height: 1.1rem;
			background-color: #fff;
			padding:0 0.225rem;
			border: 1px solid #ccc;
			box-sizing: border-box;
		}
		
		.login-tel{
			margin-top: 0.5rem;
			font-size: 0.4rem;
			
			input{
				width: 8.5rem;
			}
		}
		
		.login-btn{
			background-color: #b0352f;
			text-align: center;
			line-height:1.1rem ;
			color: #FFF;
			font-size:0.4rem ;
			border-radius:0.125rem ;
		}
	
	  }
	}
</style>